<template>
  <div class="cates">
    <searchInput />
    <view class="cates_container">
      <!-- 左侧 -->
      <scroll-view class="left_menu" scroll-y :scroll-top="scrollTop">
        <view v-for="(item,index) in leftMenuList" :key="index" :class="[index === currentIndex?'menu_item,active':'menu_item']" @click="handleItemTap(index)"
        >{{item}}</view>
      </scroll-view>
      <!-- 右侧 -->
      <scroll-view class="right_menu" scroll-y>
        <!-- 大组 -->
        <view class="goods_group" v-for="(item,index) in rightContent" :key="index">
          <view class="goods_title">
            <text class="delimiter">/</text>
            <text class="title">{{item.cat_name}}</text>
            <text class="delimiter">/</text>
          </view>
          <view class="goods_list">
            <!-- 路由跳转 -->
            <navigator v-for="(item2,index2) in item.children" :key="index2">
              <image :src="item2.cat_icon" mode="widthFix"></image>
              <view class="goods_name">{{item2.cat_name}}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </div>
</template>

<script>
import { request } from '../../utils/tools'
// import regeneratorRuntime from "../../utils/runtime";
import searchInput from '../../components/searchInput'
export default {
  components: { searchInput },
  data() {
    return {
      leftMenuList: [],
      rightContent: [],
      Cates: [],
      currentIndex: 0,
      scrollTop:0
    }
  },
  methods: {
    // 左侧点击事件
    handleItemTap(index) {
      console.log('左侧index',index);
      // 精髓=======================================
      this.rightContent = this.Cates[index].children
      this.currentIndex = index
      this.currentIndex= index
      this.scrollTop= 0
    },
    async getCates() {
      const res = await request({ url: 'categories' })
      console.log('category 请求', res)
      this.Cates = res.data.message
      // console.log('this.Cates', this.Cates)
      // 写入缓存数据
      wx.setStorageSync('cates', { time: Date.now(), data: this.Cates })
      this.leftMenuList = this.Cates.map(v => v.cat_name)
      this.rightContent = this.Cates[0].children
    }
  },
  created() {
    this.getCates()
  }
}
</script>

<style lang='less' scoped>
page {
  height: 100%;
}

.cates {
  height: 100%;

  // 容器
  .cates_container {
    // 减去搜索组件高度
    height: ~'calc(100vh - 90rpx)';
    display: flex;

    // 左
    .left_menu {
      flex: 2;
      background-color: #fff;

      .menu_item {
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
      }

      .active {
        color: var(--themeColor);
        border-left: 5rpx solid currentColor;
      }
    }

    // 右
    .right_menu {
      flex: 5;
      // background-color: plum;

      .goods_group {
        // 标题
        .goods_title {
          height: 80rpx;
          display: flex;
          justify-content: center;
          align-items: center;

          .delimiter {
            color: #ccc;
            padding: 0 10rpx;
          }
        }

        // 子类
        .goods_list {
          display: flex;
          flex-wrap: wrap;

          navigator {
            width: 33.3%;
            text-align: center;

            image {
              width: 50%;
            }
      
          }
        }
      }
    }
  }
}
</style>
 